<script setup lang="ts">
// style
import '../assets/css/tabler.min.css'
import '../assets/css/tabler-flags.min.css'
import '../assets/css/tabler-payments.min.css'
import '../assets/css/tabler-vendors.min.css'
import '../assets/css/demo.min.css'

// script
import '../assets/js/demo-theme.min.js'
import '../assets/js/tabler.min.js'
import '../assets/js/demo.min.js'

import { ref } from 'vue'
import axios from 'axios'
import $ from 'jquery'

import router from '@/router'

const allow_submit = ref(false)
const username = ref('')
const password = ref('')

const username_err = ref('')
const password_err = ref('')

const btn_cls = ref('btn btn-primary w-100')
const btn_msg = ref('登录')

const username_check = () => {
  if (username.value.length != 0 && (username.value.length < 3 || username.value.length > 12)) {
    username_err.value = '用户名长度应在3到12位之间'
    allow_submit.value = false
  } else {
    username_err.value = ''
    if (username.value.length != 0) allow_submit.value = true
  }
}
const password_check = () => {
  if (password.value.length != 0 && (password.value.length < 6 || password.value.length > 16)) {
    password_err.value = '密码长度应在6到16位之间'
    allow_submit.value = false
  } else {
    password_err.value = ''
    if (password.value.length != 0) allow_submit.value = true
  }
}

const submit_check = () => {
  if (allow_submit.value) {
    axios({
      method: 'post',
      // url: '/api/login',
      url: '/api/login',
      data: {
        username: username.value,
        password: password.value
      }
    }).then(function (res: object) {
      // @ts-ignore
      console.log(res.data)
      if ((res as any).data['ok']) {
        setTimeout(() => {
          btn_cls.value = 'btn btn-success w-100'
          btn_msg.value = '登录成功，正在跳转'
        }, 500)
        setTimeout(() => {
          router.push({path: '/home'})
        }, 2000)
      } else {
        btn_cls.value = 'btn btn-danger w-100'
        btn_msg.value = '账号不存在或密码错误'
      }
    })
  } else {
    btn_cls.value = 'btn btn-danger w-100'
    btn_msg.value = '请输入合法的账号密码'
  }
}

</script>

<template>
  <body class=" d-flex flex-column">
    <div class="page page-center card-vertical-center">
      <div class="container container-tight py-4 ">
        <div class="text-center mb-4">
          <!-- <a href="." class="navbar-brand navbar-brand-autodark"><img src="./static/logo.svg" height="36" alt=""></a> -->
        </div>
        <div class="card card-md ">
          <div class="card-body">
            <h2 class="h2 text-center mb-4">管理员登录入口</h2>
            <form autocomplete="off" novalidate>
              <div class="mb-3" style="margin-bottom: 0;">
                <label class="form-label">用户名</label>
                <el-input type="text" placeholder="请输入用户名" autocomplete="off" v-model="username"
                  @input="username_check" />
                <div class="wrong-info"><span>{{ username_err }}</span></div>
              </div>
              <div class="mb-2">
                <label class="form-label">
                  密码
                </label>
                <div class="input-group input-group-flat">
                  <el-input type="password" placeholder="请输入密码" autocomplete="off" v-model="password"
                    @input="password_check" />
                </div>
                <div class="wrong-info"><span>{{ password_err }}</span></div>
              </div>
              <div class="mb-2">
              </div>
              <div class="form-footer">
                <button type="button" id="login_btn" :class="btn_cls" @click="submit_check">{{ btn_msg }}</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- Libs JS -->
    <!-- Tabler Core -->
  </body>
</template>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}

@import url('https://rsms.me/inter/inter.css');

:root {
  --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
}

body {
  font-feature-settings: "cv03", "cv04", "cv11";
}

.card-vertical-center {
  padding-top: 10%;
}

.wrong-info {
  color: red;
  font-size: small;
  margin-top: 3px;
}
</style>